<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=0.3, user-scalable=0, minimum-scale=0, maximum-scale=5.0,user-scalable=yes">
    <link rel="stylesheet" href="/css/officialDocument/officialDocument.css">
    <link rel="stylesheet" href="/lib/pagination/style/pagination.css">
    <link rel="stylesheet" href="/lib/laydate/need/laydate.css">
    <link rel="stylesheet" type="text/css" href="/css/street/street.css"/>
    <link rel="stylesheet" type="text/css" href="/css/base.css"/>
    <style>
        html,body{
            height:100%;
            overflow: auto;
        }
        #ulactive .active{
            background:#fff ;
            /*color: #fff;*/
        }
        #ulactive{
            position: fixed;
            top:16px;
            right:50px;
            z-index: 9999;
            border-radius: 6px;
            border:1px solid #2F8AE3;
        }
        .select{
            background: #2F8AE3;
            color:#fff;
        }
        #ulactive li{
            cursor: pointer;
        }
        #ulactive input{
            float:none
        }
        /*#ulactive li{*/
        /*cursor: pointer;*/
        /*}*/
        .M-box3 .active{
            margin: 0px 3px;
            width: 29px;
            height: 29px;
            line-height: 29px;
            background: #2b7fe0;
            font-size: 12px;
            border: 1px solid #2b7fe0;
            color:#fff;
            text-align:center;
            display: inline-block;
        }
        .M-box3 a{
            margin: 0 3px;
            width: 29px;
            height: 29px;
            line-height: 29px;
            font-size: 12px;
            display: inline-block;
            text-align:center;
            background: #fff;
            border: 1px solid #ebebeb;
            color: #bdbdbd;
            text-decoration: none;
        }
        .button{
            background: #00a0e9;
            margin-left:20px;
            padding: 5px 10px;
            border-radius: 4px;
            color: #fff;
            cursor: pointer;
        }
        .begin,.end{
            width:150px;
            height:28px;
            border-radius: 3px;
            border:1px solid #ccc;
        }
        #query{
            display: inline-block;
            margin-right: 10px;
            line-height: 1;
            font-size: 14px;
            padding: 8px 10px;
            background: #2F8AE3;
            color: #fff;
            border-radius: 3px;
            cursor:pointer;
        }
        .mainBg{
            padding-top:9px;
        }
    </style>
    <script src="/lib/jQuery-File-Upload-master/jquery-1.8.3.min.js"></script>
    <script src="/js/base/base.js"></script>
    <script src="/lib/Highcharts-5.0.14/code/highcharts.js"></script>
    <script src="/lib/Highcharts-5.0.14/code/modules/data.js"></script>
    <script src="/lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/lib/Highcharts-5.0.14/code/modules/drilldown.js"></script>
    <script src="/lib/laydate/laydate.js"></script>
    <script src="/js/street/checkTheInformation.js"></script>

    <%--    <script src="/lib/Highcharts-5.0.14/code/highcharts-zh_CN.js"></script>--%>
</head>

<body style="overflow: hidden">


<ul class="clearfix" id="ulactive" >

    <li class="fl select" data-type="1" data-type="week" style="padding: 10px 20px;border-right: 1px solid #2F8AE3;">日</li>
    <li class="fl" data-type="2" data-type="week" style="padding: 10px 20px;border-right: 1px solid #2F8AE3;">周</li>
    <li class="fl" data-type="3" data-type="month" style="padding: 10px 20px;border-right: 1px solid #2F8AE3;">月</li>
    <li class="fl" data-type="4" data-type="year" style="padding: 10px 20px;">年</li>
</ul>
<div style="padding: 10px 20px;" style="margin-top:5px;" class="time">
    <input type="text" class="begin" style="float:none" name="beginTime" onclick="laydate({istime: true, format: 'YYYY-MM-DD '})">
    <span>~</span>
    <input type="text" class="end" style="float:none" name="endTime" onclick="laydate({istime: true, format: 'YYYY-MM-DD '})">
    <button id="query">查询</button>
</div>

<!--
*************************************************************************
   Generated by HCODE at 2017-09-11 14:38:27
   From: https://code.hcharts.cn/demos/hhhhDs
*************************************************************************
 -->
<div id="container" style="min-width: 510px;margin: 0 auto;background: #fff"></div>
<div class="cont" style="display: none;padding-top: 60px;">

    <div style="margin-top:-35px;margin-bottom:20px;">
        <button class="button">返回</button>
    </div>
    <div class="pagediv" style="margin: 0 auto;width: 97%;">
        <table>
            <thead>
            <tr>
                <th>序号</th>
                <th>事件描述</th>
                <th>提交人</th>
                <th>提交时间</th>
                <th>事件类型</th>
                <th>所属社区</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody class="list"></tbody>
        </table>
    </div>
    <div style="margin: 0px auto 0px;height:50px;width: 97%;" class="clearfix">
        <div id="dbgz_page" class="M-box3" style="float: right; margin-top: 13px;display: none">

        </div>
    </div>
</div>
<div class="mainBg" style="background: #fff;display: none">
    <form action="" id="datasave">
        <input type="file"  onchange="filesTwo(this)" multiple="multiple" name="file"
               style="display: none"/>
        <input type="hidden" name="userId">
        <input type="hidden" name="checkId">
        <div class="mainTitle">
            <ul class="mainTitleUl">
                <li style="    padding-top: 18px;text-align: center;height: 61px;border-bottom: 1px solid #ddd"><span class="spanSize">网络监管巡查记录表</span> </li>
                <li class="bordercolor clearfix">
                    <span style="border-bottom: 1px solid #fff">社区名称 <b style="color: red;vertical-align: middle;margin-left: 4px;">*</b></span>
                    <label>
                        <select onchange="subCommunityTwo(this)"  name="subCommunity" id="subCommunity">
                            <option value="">请选择</option>
                        </select>
                    </label>
                    <span>巡查时间<b style="color: red;vertical-align: middle;">*</b></span>
                    <label>
                        <input type="text" name="checkTime" placeholder="请选择巡查时间"
                               readonly="readonly" id="time">
                    </label>
                </li>
                <li class="bordercolor clearfix">
                    <span style="border-bottom: 1px solid #fff">检查类型<b style="color: red;vertical-align: middle;">*</b></span>
                    <label>
                        <select name="checkType" id="checkId">
                            <option value="">请选择</option>
                        </select>
                    </label>
                    <label style="width: 50%;"></label>
                </li>
                <li class="bordercolor clearfix">
                    <span style="border-bottom: 1px solid #fff">网格名称<b style="color: red;vertical-align: middle;">*</b></span>
                    <label>
                        <select name="gridId">
                            <option value="">请选择</option>
                        </select>
                    </label>
                    <label style="width: 50%;"></label>
                </li>
                <li class="bordercolor clearfix">
                    <span style="border-bottom: 1px solid #fff;">位置</span>
                    <label style="width: 80%;">
                        <input type="text" name="location" placeholder="请填写位置" style="background: #fcfcfc;    width: 92%;
    float: none;
    margin-top: 0px;">

                    </label>
                </li>



                <li class="bordercolor clearfix">
                    <span style="border-bottom: 1px solid #fff;height: 144px;line-height: 144px">问题描述</span>
                    <label style="width: 80%;height: 144px;">
                        <textarea name="checkInfo" style="background: #fcfcfc"  placeholder="请填写问题描述"></textarea>
                    </label>
                </li>

                <li class="bordercolor clearfix">
                    <span style="border-bottom: 1px solid #fff;height: 100px;line-height: 100px">整改前照片</span>
                    <label style="width: 80%;height: 100px;">
                        <div class="picture prevTwo" style="position: relative">
                            <input type="hidden" name="attachmentId">
                            <img class="fl addPhotos" style="    width: 60px;cursor: pointer;
    height: 60px;
    margin-top: 4px;
    margin-right: 7px;" src="/img/grid/addtupin.png" alt="添加照片">
                            <input type="hidden" name="attachmentName">

                            <ul class="fl">
                                <%--<li>--%>
                                <%--<img src="/img/app/email.png" alt="">--%>
                                <%--<b class="deleClear">x</b>--%>
                                <%--</li>--%>
                            </ul>

                            <%--style="display:none;position: absolute;width: 68px;height: 30px;top: 27px;right: 5px;"--%>

                        </div>
                    </label>
                </li>
                <li class="bordercolor clearfix">
                    <span style="border-bottom: 1px solid #fff;height: 100px;line-height: 100px">整改后照片</span>
                    <label style="width: 80%;height: 100px;">
                        <div class="picture nextTwo">
                            <input type="hidden" name="attachmentId2">
                            <img class="fl addPhotos" style="    width: 60px;cursor: pointer;
    height: 60px;
    margin-top: 4px;
    margin-right: 7px;" src="/img/grid/addtupin.png" alt="添加照片">



                            <input type="hidden" name="attachmentName2">
                            <ul class="fl">
                                <%--<li>--%>
                                <%--<img src="/img/app/email.png" alt="">--%>
                                <%--<b class="deleClear">x</b>--%>
                                <%--</li>--%>
                            </ul>



                        </div>
                    </label>
                </li>
                <li class="bordercolor clearfix">
                    <span style="border-bottom: 1px solid #fff;height: 144px;line-height: 144px">备注</span>
                    <label style="width: 80%;height: 144px;">


                        <textarea name="mark" id=""  placeholder="请填写备注" style="background: #fcfcfc"></textarea>
                    </label>
                </li>
                <%--<li class="bordercolor clearfix">--%>
                <%--<span style="border-bottom: 1px solid #fff;height: 70px;line-height: 70px">巡检人员签字</span>--%>
                <%--<label style="width: 80%;height: 70px;">--%>
                <%--<textarea style="height: 40px;margin-top: 8px;" name="" id=""  placeholder="巡检人员请签字" style="background: #f9f9f9"></textarea>--%>
                <%--</label>--%>
                <%--</li>--%>

            </ul>
            <div style="height: 88px;line-height: 88px;text-align: center">
                <a href="javascript:void (0)" class="preservation" style="
                margin-top: 25px;display: inline-block;margin-right: 10px;
                line-height: 1;font-size:18px;padding: 8px 20px;
                background: #2F8AE3;color: #fff;border-radius: 6px">保存</a>
                <a href="javascript:void (0)" class="getBack"  style="
                margin-top: 25px;display: inline-block;
                line-height: 1;font-size:18px;padding: 8px 20px;background: #2F8AE3;color: #fff;border-radius: 6px">返回</a>
                <a href="javascript:void (0)" class="shangbao"  style="
                margin-top: 25px;display: inline-block;    margin-left: 12px;
                line-height: 1;font-size:18px;padding: 8px 20px;background: #2F8AE3;color: #fff;border-radius: 6px">上报</a>

            </div>
        </div>
    </form>
</div>
<script>
    $('#container').height($(window).height()-44);
    var urllocation=$.GetRequest().type;


    //    分页列表
    var ajaxPageLe={
        data:{
            page:1,//当前处于第几页
            pageSize:10,//一页显示几条
            useFlag:true
        },
        page:function () {
            var me=this;
            $.ajax({
                url:'/gridEvent/gridByUserName',
                type:'get',
                data:me.data,
                dataType:'json',
                success:function(reg){
                    var arr=reg.datas;
                    var str="";
                    for (var i = 0; i < arr.length; i++) {
                        str += '<tr>' +
                            '<td>' + (i + 1) + '</td>' +
                            '<td>' + arr[i].eventInfo + '</td>' +
                            '<td>' + arr[i].userName + '</td>' +
                            '<td>' + arr[i].dateTime + '</td>' +
                            '<td>' + arr[i].codeName + '</td>' +
                            '<td>' + arr[i].gridName + '</td>' +
                            '<td>' +function () {
                                if(me.data.flowStatus==0){
                                    return  '<a href="javascript:void(0)" data-id="'+arr[i].eventId+'" class="btnData" data-type="2" style="margin-right: 10px;">编辑</a>' +
                                        '<a href="javascript:void(0)" data-id="'+arr[i].eventId+'"   class="deleteAthis">删除</a>'
                                } else {
                                    return '<a href="javascript:void(0)" data-id="'+arr[i].eventId+'"' +
                                        '  data-flowStep="'+arr[i].prcsId+'" data-prcsId="'+arr[i].flowPrcs+'" data-rumId="'+arr[i].rumId+'"  data-flowPrcs="'+arr[i].prcsId+'"  data-flowId="'+arr[i].flowId+'"  class="particulars">查看详情</a>'
                                }
                            }()+
                        '</td></tr>'
                    }
                    $('.list').html(str);
                    if(reg.total>10){
                        $('#dbgz_page').show();
                        me.pageTwo(reg.total,me.data.pageSize,me.data.page)
                    }else{
                        $('#dbgz_page').hide();
                    }


                }
            })

        },
        pageTwo:function (totalData, pageSize,indexs) {
            var mes=this;
            $('#dbgz_page').pagination({
                totalData: totalData,
                showData: pageSize,
                jump: true,
                coping: true,
                homePage:'',
                endPage: '',
                current:indexs||1,
                callback: function (index){
                    mes.data.page=index.getCurrent();
                    mes.page();
                }
            });
        }
    };
    ajaxPageLe.page();

    $(document).delegate('.particulars','click',function () {
        window.open('/workflow/work/workformPreView?flowId='+$(this).attr('data-flowId')+'&flowStep='+$(this).attr('data-flowStep')+'&runId='+$(this).attr('data-rumId')+'&prcsId='+$(this).attr('data-prcsId')+'&tabId='+$(this).attr('data-id'))
    });
    // 列表返回
    $('.button').click(function(){
        $('.cont').hide();
        $('#container').show();
        $('#ulactive').show();
        $('.time').show();
    });
    ////    点击详情
    //    $('.list').on('click','.detail',function(){
    //        $('.mainBg').show();
    //        $('.cont').hide();
    //    })



    function typeajax(type,startTime,endTime,fn) {
        $.ajax({
            type : 'get',
            url : '/gridEvent/getStatisticsByGridType',
            dataType : 'json',
            data : {
                timeType:type,
                queryType:urllocation,
                startTime:startTime,
                endTime:endTime
            },
            success : function(json) {
                var rsp=json.datas;
                var arrs=[];
                var arrsTwo=[];
                for(var i=0;i<rsp.length;i++){
                    var obj={};
                    obj.name=rsp[i].name;
                    obj.id=rsp[i].id;
                    obj.y=rsp[i].y
                    if(urllocation==2){
                        obj.index=(i+1);
                    }
                    arrs.push(obj)
                }
                fn(arrs,urllocation)
            }
        });
    }


    $(function () {
        $("#query").click(function () {
            var endTime=$("input[name='endTime']").val();
            var startTime=$("input[name='beginTime']").val();
            typeajax("",startTime,endTime,function (arrs,dataType) {
                Highcharts.chart('container', {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: '派发次数'
                    },
                    credits: {
                        enabled: false
                    },
                    subtitle: {
                        text: '点击可查看详细信息'
                    },
                    xAxis: {
                        type: 'category'
                    },
                    yAxis: {
                        title: {
                            text: '派发次数'
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '{point.y}'
                            },
                            events:{
                                click:function(e){
                                    $('.cont').show();
                                    $('#container').hide();
                                    $('#ulactive').hide();
                                    $('.time').hide();
                                    if(dataType=='grid'){
                                        ajaxPageLe.data.gridId=e.point.options.id;
                                        ajaxPageLe.data.startTime=$('.begin').val()
                                        ajaxPageLe.data.endTime=$('.end').val()
                                        ajaxPageLe.data.page=1
                                        ajaxPageLe.page()
                                    }else{
                                        ajaxPageLe.data.type=e.point.options.id;
                                        ajaxPageLe.data.timeType=""
                                        ajaxPageLe.data.startTime=$('.begin').val()
                                        ajaxPageLe.data.endTime=$('.end').val()
                                        ajaxPageLe.data.page=1
                                        ajaxPageLe.page()
                                    }
                                }
                            }
                        }
                    },
                    tooltip: {
                        headerFormat:
                            '<span style="font-size:11px">{series.name}</span><br>',
                        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
                    },
                    series: [{
                        name: '派发次数',
                        colorByPoint: true,
                        data: arrs
                    }],
//                    drilldown: {
//                        series:arrsTwo
//                    }
                });
            })
        });
//        $('#ulactive li').change(function () {
//            $(this).siblings('li').removeClass('active');
//            $(this).addClass('active')
        typeajax($('.select').attr('data-type'),"","",function (arrs,dataType) {
            Highcharts.chart('container', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: '派发次数'
                },
                credits: {
                    enabled: false
                },
                subtitle: {
                    text: '点击可查看详细信息'
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    title: {
                        text: '派发次数'
                    }
                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                            format: '{point.y}'
                        },
                        events:{
                            click:function(e){
                                $('.cont').show();
                                $('#container').hide();
                                $('#ulactive').hide();
                                $('.time').hide();
                                if(dataType=='grid'){
                                    ajaxPageLe.data.gridId=e.point.options.id;
                                    ajaxPageLe.data.timeType=$('.select').attr('data-type')
                                    ajaxPageLe.data.page=1
                                    ajaxPageLe.page()
                                }else{
                                    ajaxPageLe.data.type=e.point.options.id;
                                    ajaxPageLe.data.timeType=$('.select').attr('data-type')
                                    ajaxPageLe.data.page=1
                                    ajaxPageLe.page()
                                }
                            }
                        }
                    }
                },
                tooltip: {
                    headerFormat:
                        '<span style="font-size:11px">{series.name}</span><br>',
                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
                },
                series: [{
                    name: '派发次数',
                    colorByPoint: true,
                    data: arrs
                }],
//                drilldown: {
//                    series:arrsTwo
//                }
            });
        });
//        })
        $('#ulactive li').click(function() {
            $(this).addClass('select').siblings().removeClass('select')
            var type = $(this).attr('data-type')
            typeajax(type,"","",function (arrs,dataType) {
                Highcharts.chart('container', {
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: '派发次数'
                    },
                    credits: {
                        enabled: false
                    },
                    subtitle: {
                        text: '点击可查看详细信息'
                    },
                    xAxis: {
                        type: 'category'
                    },
                    yAxis: {
                        title: {
                            text: '派发次数'
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    plotOptions: {
                        series: {
                            borderWidth: 0,
                            dataLabels: {
                                enabled: true,
                                format: '{point.y}'
                            },
                            events:{
                                click:function(e){
                                    $('.cont').show();
                                    $('#container').hide();
                                    $('#ulactive').hide();
                                    $('.time').hide();
                                    if(dataType=='grid'){
                                        ajaxPageLe.data.gridId=e.point.options.id;
                                        ajaxPageLe.data.timeType=$('.select').attr('data-type')
                                        ajaxPageLe.data.page=1
                                        ajaxPageLe.page()
                                    }else{
                                        ajaxPageLe.data.type=e.point.options.id;
                                        ajaxPageLe.data.timeType=$('.select').attr('data-type')
                                        ajaxPageLe.data.page=1
                                        ajaxPageLe.page()
                                    }

                                }
                            }
                        }
                    },
                    tooltip: {
                        headerFormat:
                            '<span style="font-size:11px">{series.name}</span><br>',
                        pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y}</b><br/>'
                    },
                    series: [{
                        name: '派发次数',
                        colorByPoint: true,
                        data: arrs
                    }],
//                drilldown: {
//                    series:arrsTwo
//                }
                });
            });
        })

    });
</script>
</body>
</html>